<%--收货地址页面--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>收货地址-天猫</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/index/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/nav.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/receipt_address.css"/>
    <%--    element  vue--%>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/totoro-utils.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>

<jsp:include page="${pageContext.request.contextPath}/public_page/nav.jsp"></jsp:include>
<div style="width: 100%; height: 6px; background-color: #F2F2F2"></div>

<jsp:include page="${pageContext.request.contextPath}/public_page/ui_header.jsp"></jsp:include>

<!-- content start-->

<div id="content" style="position: relative; overflow: hidden" class="grid-c2 ra">
    <div class="col-main" style="float: left;">
        <div class="main-wrap" id="container">
            <div class="page-index">
                <div class="head"><span class="h-text">收货地址</span></div>
                <div class="address">
                <div class="headTips"><span class="ht-type">${empty param.addrId?'新增收货地址':'修改收货地址'}</span></div>
                <input type="hidden" name="isUpdate" id="isUpdate" value="${update?1:0}">
                <form id="myForm" class="next-form next-medium" style="width: 50%;" action="/user_logic/${update?"update_address.htm":"insert_address.htm"}" method="post">
                    <c:if test="${update}">
                        <input type="hidden" name="id" id="id" value="${address.id}">
                    </c:if>
                    <div class="cndzkEntrance" id="cndzkEntrance">
                    <div>
                        <div>
                            <div class="cndzk-entrance-division  " style="margin-left: -5px;">
                                <div class="cndzk-entrance-division-header">
                                    <span class="cndzk-entrance-division-header-label">
                                        <div class="next-form-item-label"><label required="">地址信息:</label>
                                        </div>
                                    </span>
                                    <div class="cndzk-entrance-division-header-click" id="openArea">
                                        <span class="cndzk-entrance-division-header-click-input">
<%--                                            判断是否需要修改，修改则进行数据渲染--%>
                                            <c:if test="${update}">
                                                <c:set var="addr" value="${fn:split(address.address, ' ')}"></c:set>
                                                <c:set var="addrCode" value="${fn:split(address.addressCode, ' ')}"></c:set>

                                                <c:forEach begin="0" end="${fn:length(addr)-1}" var="i" varStatus="st">
                                                    <span data-value="${addrCode[i]}">
                                                        <span class="cndzk-entrance-division-header-click-input-name">${addr[i]}</span>
                                                            <%-- 如果不是最后一个，才会分隔--%>
                                                        <c:if test="${!st.last}">
                                                            <span class="cndzk-entrance-division-header-click-input-symbol">/</span>
                                                        </c:if>
                                                    </span>
                                                </c:forEach>
                                            </c:if>
                                                <%--否则的话，就正常添加--%>
                                            <c:if test="${!update}">
                                                <p class="placeholder">请选择省/市/区</p>
                                            </c:if>
                                        </span>
                                        <span class="cndzk-entrance-division-header-click-icon iconfont icon-new_xiajiantou"></span>
                                            <%-- 两个隐藏按钮，用于提交表单--%>
                                        <input type="hidden" name="address" id="address" value="${address.address}"/>
                                        <input type="hidden" name="addressCode" id="addressCode" value="${address.addressCode}"/>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="error-msg" id="areaError"></div>
                    </div>
                    <div>
                        <div class="cndzk-entrance-associate "><span class="cndzk-entrance-associate-title"><div
                                class="next-form-item-label"><label required="">详细地址:</label></div></span>
                            <div class="cndzk-entrance-associate-area" id="detail-box">
                                <textarea class="cndzk-entrance-associate-area-textarea" rows="2" cols="20" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" name="detail">${address.detail}</textarea>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="error-msg" id="detailError"></div>
                    </div>
                </div>
                    <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
                    </div>
                    <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
                        <div dir="ltr" role="gridcell" class="next-col next-form-item-label">
                            <label required="">收货人姓名:</label>
                        </div>
                        <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                            <span class="next-input next-medium" id="consignee-box">
                                <input id="consignee" placeholder="长度不超过25个字符" name="consignee" height="100%" autocomplete="off" value="${address.consignee}">
                            </span>
                            <div class="error-msg not-ml" id="fullNameError"></div>
                        </div>
                    </div>
                    <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium form-item-mobile">
                        <div dir="ltr" role="gridcell" class="next-col next-form-item-label">
                            <label required="">手机号码:</label>
                        </div>
                        <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                            <div dir="ltr" role="row" class="next-row" style="margin-left: -2px; margin-right: -2px;">
                                <div dir="ltr" role="gridcell" class="next-col next-col-14" style="padding-left: 2px; padding-right: 2px;">
                                    <div class="next-form-item next-medium">
                                        <div class="next-form-item-control">
                                            <span data-meta="Field" class="next-input next-medium" id="phone-box">
                                                <input id="phone" placeholder="电话号码、手机号码必须填一项" name="phone" height="100%" autocomplete="off" value="${address.phone}">
                                            </span>
                                            <div class="error-msg not-ml" id="phoneError"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
                        <div dir="ltr" role="gridcell" class="next-col next-form-item-label">
                            <label> </label>
                        </div>
                        <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                            <label class="next-checkbox-wrapper ">
                                <span class="next-checkbox">
                                    <span class="next-checkbox-inner">
                                        <i class="next-icon next-icon-select next-xs"></i>
                                    </span>
                                    <input data-meta="Field" id="setDefault" type="checkbox" aria-checked="false" class="next-checkbox-input" value="" ${address.defaultAddress == 1?"checked":""}>
                                        <input type="hidden" name="defaultAddress" id="defaultAddress" value="${address.defaultAddress == 1?1:0}"/>
                                </span>
                                <span class="next-checkbox-label">设置为默认收货地址</span>
                            </label>
                        </div>
                    </div>
                    <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
                        <div dir="ltr" role="gridcell" class="next-col next-form-item-label"><label> </label></div>
                        <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                            <button type="submit" class="next-btn next-medium next-btn-primary">
                                <span class="next-btn-helper">保存</span>
                            </button>
                        </div>
                    </div>
                </form>
                </div>
                <div class="addressList">
                    <div role="alert" class="next-message next-message-notice next-inline next-medium next-only-content"
                         style="margin-bottom: 20px;"><i
                            class="next-icon next-medium next-message-symbol next-message-symbol-icon"></i>
                        <div class="next-message-content" data-nowcount="${fn:length(addressList)}">已保存了${fn:length(addressList)}条地址，还能保存${20-fn:length(addressList)}条地址</div>
                    </div>
                    <div class="next-table next-table-medium">
                        <table role="table">
                            <colgroup>
                                <col style="width: 300px;">
                                <col style="width: 600px;">
                                <col style="width: 1000px;">
                                <col style="width: 400px;">
                                <col style="width: 260px;">
                                <col style="width: 110px;">
                                <col>
                            </colgroup>
                            <thead class="next-table-header">
                            <tr>
                                <th rowspan="1" class="next-table-cell next-table-header-node" role="gridcell">
                                    <div class="next-table-cell-wrapper" data-next-table-col="0">收货人</div>
                                </th>
                                <th rowspan="1" class="next-table-cell next-table-header-node" role="gridcell">
                                    <div class="next-table-cell-wrapper" data-next-table-col="1">所在地区</div>
                                </th>
                                <th rowspan="1" class="next-table-cell next-table-header-node" role="gridcell">
                                    <div class="next-table-cell-wrapper" data-next-table-col="2">详细地址</div>
                                </th>
                                <th rowspan="1" class="next-table-cell next-table-header-node" role="gridcell">
                                    <div class="next-table-cell-wrapper" data-next-table-col="4">电话/手机</div>
                                </th>
                                <th rowspan="1" class="next-table-cell next-table-header-node" role="gridcell">
                                    <div class="next-table-cell-wrapper" data-next-table-col="5">操作</div>
                                </th>
                                <th rowspan="1" class="next-table-cell next-table-header-node" role="gridcell">
                                    <div class="next-table-cell-wrapper" data-next-table-col="6"></div>
                                </th>
                            </tr>
                            </thead>
                            <tbody class="next-table-body">
                            <c:forEach items="${addressList}" var="address" varStatus="status">
<%--                                根据状态判断首尾并给上选择器--%>
                                <c:choose>
                                    <c:when test="${status.first}">
                                        <tr class="next-table-row first" role="row" data-addrId="${address.id}">
                                    </c:when>
                                    <c:when test="${status.last}">
                                        <tr class="next-table-row last" role="row" data-addrId="${address.id}">
                                    </c:when>
                                    <c:otherwise>
                                        <tr class="next-table-row" role="row" data-addrId="${address.id}">
                                    </c:otherwise>
                                </c:choose>
                                    <td data-next-table-col="0" data-next-table-row="0" class="next-table-cell first" role="gridcell">
                                        <div class="next-table-cell-wrapper" data-next-table-row="0">${address.consignee}</div>
                                    </td>
                                    <td data-next-table-col="1" data-next-table-row="0" class="next-table-cell" role="gridcell">
                                        <div class="next-table-cell-wrapper" data-next-table-row="0">
                                            <span>${address.address}</span>
                                        </div>
                                    </td>
                                    <td data-next-table-col="2" data-next-table-row="0" class="next-table-cell"
                                        role="gridcell">
                                        <div class="next-table-cell-wrapper" data-next-table-row="0">${address.detail}
                                        </div>
                                    </td>
                                    <td data-next-table-col="4" data-next-table-row="0" class="next-table-cell"
                                        role="gridcell">
                                        <div class="next-table-cell-wrapper" data-next-table-row="0">
                                            <span>86-${address.phone}<br></span></div>
                                    </td>
                                    <td data-next-table-col="5" data-next-table-row="0" class="next-table-cell" role="gridcell">
                                        <div class="next-table-cell-wrapper" data-next-table-row="0">
                                            <div class="tAction">
                                                <div class="disable-action-con">
                                                    <a class="t-change"  href="/user/receiptAddress.htm?addrId=${address.id}" target="_self">修改</a>
                                                    <span class="t-line">|</span>
                                                </div>
                                                <span class="t-delete">删除</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td data-next-table-col="6" data-next-table-row="0" class="next-table-cell last" role="gridcell">
                                        <div class="next-table-cell-wrapper" data-next-table-row="0">
                                            <div>
                                                <c:if test="${address.defaultAddress == 1}" var="isDefault">
                                                <span class="t-default">默认地址</span>
                                                </c:if>
                                                <c:if test="${!isDefault}">
                                                    <span class="t-setDefault">设为默认</span>
                                                </c:if>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- left -->
    <jsp:include page="${pageContext.request.contextPath}/public_page/um-left.jsp"></jsp:include>
    <style>
        #receiptAddress a{
            color: #f40;
        }
    </style>
</div>

<div id="app" style="display: none; visibility: hidden">
    <template>
        <el-button :plain="true" @click="success" id="success"></el-button>
        <el-button :plain="true" @click="error" id="error"></el-button>
        <el-button :plain="true" @click="confirmDelete" id="confirmDelete"></el-button>
    </template>
</div>

<!-- conten end-->
<jsp:include page="${pageContext.request.contextPath}/public_page/last.html"></jsp:include>
<jsp:include page="/public_page/open_chat.jsp"></jsp:include>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/self/user/receiptAddress.js"></script>
</body>
</html>
